<template>
  <div class="month-view">
    <!-- 月份导航 -->
    <div class="month-header">
      <el-button 
        size="mini" 
        icon="el-icon-arrow-left" 
        @click="prevMonth"
        class="nav-button"
      />
      <h3>{{ currentYear }}年 {{ currentMonth }}月</h3>
      <el-button 
        size="mini" 
        icon="el-icon-arrow-right" 
        @click="nextMonth"
        class="nav-button"
      />
    </div>
    
    <!-- 星期标题 -->
    <div class="weekdays-header">
      <div v-for="day in weekdays" :key="day">{{ day }}</div>
    </div>
      
    <!-- 日期网格 -->
    <div class="days-grid">
      <div 
        v-for="day in monthDays" 
        :key="day.date"
        class="day-cell"
        :class="{
          'current-month': day.isCurrentMonth,
          'today': day.isToday,
          'weekend': day.isWeekend
        }"
        @click="handleDayClick(day)"
      >
        <div class="day-number">{{ day.day }}</div>
        <div class="schedules-list">
          <ScheduleActions
            v-for="schedule in getDaySchedules(day.date)"
            :key="schedule.scheduleId"
            :schedule="schedule"
            @edit="$emit('edit', $event)"
            @delete="$emit('delete', $event)"
          >
            <div class="schedule-item">
              {{ schedule.title }}
            </div>
          </ScheduleActions>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ScheduleActions from '@/components/Schedule/ScheduleActions.vue'

export default {
  components: { ScheduleActions },
  props: ['schedules'],
  data() {
    return {
      currentDate: new Date(),
      weekdays: ['日', '一', '二', '三', '四', '五', '六']
    }
  },
  computed: {
    currentYear() {
      return this.currentDate.getFullYear()
    },
    currentMonth() {
      return this.currentDate.getMonth() + 1
    },
    monthDays() {
      const today = new Date()
      const todayStr = this.formatLocalDate(today)

      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth()
      const firstDay = new Date(year, month, 1)
      const lastDay = new Date(year, month + 1, 0)
      
      const days = []
      
      // 上个月补全
      const firstWeekday = firstDay.getDay()
      for (let i = 0; i < firstWeekday; i++) {
        const date = new Date(year, month, -i)
        days.unshift(this.createDayObject(date, false))
      }
      
      // 当月日期
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(year, month, i)
        const dateStr = this.formatLocalDate(date)
        days.push(this.createDayObject(
          date, 
          true, 
          dateStr === todayStr
        ))
      }
      
      // 下个月补全
      const lastWeekday = lastDay.getDay()
      for (let i = 1; i < 7 - lastWeekday; i++) {
        const date = new Date(year, month + 1, i)
        days.push(this.createDayObject(date, false))
      }

      return days
    }
  },
  methods: {
    formatLocalDate(date) {
      const pad = n => n.toString().padStart(2, '0')
      return `
        ${date.getFullYear()}-
        ${pad(date.getMonth()+1)}-
        ${pad(date.getDate())}
      `.replace(/\s+/g, '')
    },
    createDayObject(date, isCurrentMonth, isToday = false) {
      return {
        day: date.getDate(),
        date: this.formatLocalDate(date),
        dayName: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()],
        isCurrentMonth,
        isToday,
        isWeekend: [0, 6].includes(date.getDay())
      }
    },
    prevMonth() {
      this.currentDate = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth() - 1,
        1
      )
    },
    nextMonth() {
      this.currentDate = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth() + 1,
        1
      )
    },
    getDaySchedules(date) {
      return this.schedules.filter(item => item.date === date)
    },
    handleDayClick(day) {
      if (day.isCurrentMonth) {
        this.$emit('day-click', day.date)
      }
    }
  },
  filters: {
    formatDate(dateStr) {
      const [year, month, day] = dateStr.split('-')
      return `${month}/${day}`
    }
  }
}
</script>

<style scoped>
.month-view {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 月份导航 */
.month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 10px;
}

.month-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

.weekdays-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  color: #606266;
  margin-bottom: 10px;
}

/* 网格布局 */
.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: start;
}

.day-cell {
  min-height: 100px;
  height: auto;
  padding: 5px;
  border-radius: 4px;
  background-color: #f9f9f9;
  transition: all 0.2s;
}

.day-cell.current-month {
  background-color: #fff;
  border: 1px solid #ebeef5;
}

.day-cell.today {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}

.day-cell.weekend {
  background-color: #fef0f0;
}

.day-cell:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.day-number {
  text-align: right;
  font-weight: bold;
  margin-bottom: 5px;
}

.day-cell.today .day-number {
  color: #67c23a;
}

.day-cell:not(.current-month) .day-number {
  color: #c0c4cc;
}

/* 日程列表样式 */
.schedules-list {
  min-height: 60px;
  max-height: 300px;
  overflow-y: auto;
}

.schedule-item {
  font-size: 12px;
  padding: 4px;
  margin-bottom: 4px;
  background-color: #f0f7ff;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid #409eff;
}
</style>